<button x-cloak @click="$store.global.toggleDarkMode(); $dispatch('toggle-dark');" class="flex items-center">
  <span class="sr-only">
    Toggle dark mode
  </span>

  {{/* Heroicon: outline/sun */}}
  <svg x-show="$store.global.isDark()" class="text-yellow-500 hover:text-yellow-600 h-7 w-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
  </svg>

  {{/* Heroicon: solid/moon */}}
  <svg x-show="$store.global.isLight()" class="text-primary h-7 w-7" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
    <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
  </svg>
</button>